import React from 'react'
import style from './style/CardContainer.css'
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'

export default function CardContainer(props) {
  const {children, title, isNormal, path = '#' }= props
  // {children, title = '热门推荐'}
  console.log(children, 'children')
  console.log(props, 'propss')

  return (
    <div className={style.zCard}>
      <div className={style.cardHeader}>
        <div className={style.hLeftcon}>
          <svg t="1605949700045" className={style.iCon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3271" width="20" height="20"><path d="M512 1016C234.08 1016 8 789.92 8 512S234.08 8 512 8 1016 234.08 1016 512 789.92 1016 512 1016zM516 304c-112.48 0-204 91.52-204 204s91.52 204 204 204 204-91.52 204-204S628.48 304 516 304z" p-id="3272" fill="#C20C0C"></path></svg>
          <div className={style.zH_lefttext}>{title}</div>
          <div className={style.zH_children}>{isNormal ? null  : children[0]}</div>
        </div>
        <div className={style.zH_more}>
          <Link className={style.zH_more_text} to={path}>更多</Link>
          <svg t="1605950029975" className={style.iCon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4294" width="15" height="20"><path d="M668.19698365 394.85240547L668.19698365 429.7938034 752.55048704 497.52986361 225.70574643 497.76113865 225.63705076 525.01321933 754.68119289 525.01321933 668.19698365 594.48670326 668.19698365 629.14759453 798.36294924 525.01321933 798.36294924 498.97933922Z" fill="#C20C0C" p-id="4295"></path></svg>
        </div>
      </div>
      <div className={style.cardBody}>
        {isNormal ? children : children[1]}
      </div>
    </div>
  )
}

CardContainer.propTypes = {
  children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),   //符合任意一个类型即可
  title: PropTypes.string.isRequired
}

CardContainer.defaultProps = {
  isNormal: true
} 